@extends('base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-body">
            <form action="{{route('caiwu.order.store')}}" method="post" class="layui-form">
                {{csrf_field()}}
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">选择客户</label>
                    <div class="layui-input-inline" style="width: 90px">
                        <button type="button" id="chose_customer" class="layui-btn layui-btn-sm">点击选择</button>
                    </div>
                    <input type="hidden" name="customer_id" value="0" id="customer_id">
                    <div class="layui-word-aux layui-form-mid" id="customer_tips"></div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">下单日期</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text" name="stime" id="stime" lay-verify="required" placeholder="点击选择" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">交单日期</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text" name="etime" id="etime" lay-verify="required" placeholder="点击选择" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">总金额</label>
                    <div class="layui-input-block">
                        <input class="layui-input" id="total_money" type="number" name="total_money" lay-verify="required" placeholder="订单总金额">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">已收款</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="number" name="payed_money" value="0" lay-verify="required" placeholder="已收款总金额">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">付款方式</label>
                    <div class="layui-input-block">
                        <input type="radio" name="pay_type" value="1" title="一次付清" lay-filter="payType" lay-verify="required">
                        <input type="radio" name="pay_type" value="2" title="分期付款" lay-filter="payType" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item" id="fenqi" style="display: none">
                    <label for="" class="layui-form-label">分期金额</label>
                    <div class="layui-input-inline" style="width: 100px">
                        <input type="number" name="first_money" class="layui-input" placeholder="前期款金额">
                    </div>
                    <div class="layui-form-mid layui-word-aux">-</div>
                    <div class="layui-input-inline" style="width: 100px">
                        <input type="number" name="mid_money" class="layui-input" placeholder="中期款金额">
                    </div>
                    <div class="layui-form-mid layui-word-aux">-</div>
                    <div class="layui-input-inline" style="width: 100px">
                        <input type="number" name="last_money" class="layui-input" placeholder="尾款金额">
                    </div>
                    <div class="layui-form-mid layui-word-aux">前期款 - 中期款 - 尾款</div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remark" class="layui-textarea" lay-verify="required" ></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">业务产品</label>
                    <div class="layui-input-block">
                        <div id="demo1" class="xm-select-demo"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">资料附件</label>
                    <div class="layui-input-block">
                        @include('common.multiple_file')
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="go-close-refresh" >确认</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['element', 'form', 'layer', 'table', 'upload', 'laydate', 'jquery'], function () {
            var $ = layui.jquery;
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;
            var laydate = layui.laydate;

            $("#chose_customer").click(function () {
                layer.open({
                    type: 2,
                    title: false,
                    shadeClose: true,
                    area: ["80%","80%"],
                    content: '{{route('api.choseCustomer')}}',
                })
            })

            laydate.render({
                elem: '#stime',
                type: 'date'
            });
            laydate.render({
                elem: '#etime',
                type: 'date'
            });

            form.on('radio(payType)',function (data) {
                if (data.value == 2){
                    $("#fenqi").show()
                }else {
                    $("#fenqi").hide()
                }
            })

            $.get("{{route('api.getProduct')}}",function (res) {
                if (res.code===0){
                    xmSelect.render({
                        el: '#demo1',
                        name: 'product_ids',
                        autoRow: true,
                        layVerify: 'required',
                        cascader: {
                            //是否显示级联模式
                            show: false,
                            //间距
                            indent: 200,
                            //是否严格遵守父子模式
                            strict: true,
                        },
                        height: '200px',
                        prop: {
                            name: 'name',
                            value: 'id',
                        },
                        data: res.data,
                    })
                }
            })

        });
    </script>
@endsection
